<!-- 弹窗 详情 -->
<script lang="tsx" setup>
import FileUpload from "@/components/file-system/file-upload.vue";
import type { FormDescChild } from "@/components/form-desc/form-desc.vue";
import { whManagerBsTbRiskHazardsStdSaveOrUpdateUsingPost } from "@/genapi/wh";
import { useAsync } from "@/hooks/use-async";

import { injectState } from "../state";

import bus from "vue3-eventbus";

defineOptions({ name: "createNodeDialog" });

const { page } = injectState()!;

const dialogRef = shallowRef<InstanceType<GlobalComponents["PromiseDialog"]>>();
const formDescRef = shallowRef<InstanceType<GlobalComponents["FormDesc"]>>();

const type = ref<"write" | "read">();

const beforeClose = async () => {
	if (type.value === "write") {
		await ElMessageBox.confirm("确认关闭？");
	}
};

const trigger = async (
	_type: "write" | "read" = "read",
	value = {} as any,
	val: Boolean,
) => {
	if (val) {
		type.value = _type;
		model.value = {
			id: "",
			name: "",
			parentId: "",
			remark: "",
		};
		model.value.parentId = value.id;
		await dialogRef.value?.open();
	} else {
		type.value = _type;
		model.value = JSON.parse(JSON.stringify(value)) as any;
		await dialogRef.value?.open();
	}
};

defineExpose({
	trigger,
});

const model = ref({
	id: "",
	name: "",
	parentId: "",
	remark: "",
});

const title = computed(() => {
	if (type.value === "write") {
		return model.value.id ? "编辑" : "新增";
	} else {
		return `详情`;
	}
});

const { execute, isLoading } = useAsync(async () => {
	await formDescRef.value?.formRef?.validate();
	await ElMessageBox.confirm("确认提交？", "提示", {
		type: "warning",
	});

	await whManagerBsTbRiskHazardsStdSaveOrUpdateUsingPost({
		data: {
			...model.value,
		},
	});
	ElMessage.success("提交成功");
	page.execute();
	dialogRef.value?.complete();
	bus.emit("updateTreeData");
});

const children: FormDescChild[] = [
	{
		label: "标准名称",
		prop: "name",
		rule: [{ required: true, message: "请输入", trigger: "blur" }],
		span: 2,
		formItem: () => (
			<el-input v-model={model.value.name} placeholder="请输入" />
		),
		descItem: () => `${model.value.name ?? "-"}`,
	},
	{
		label: "备注",
		prop: "remark",
		rule: [{ required: false, message: "请输入", trigger: "blur" }],
		span: 2,
		formItem: () => (
			<el-input
				type="textarea"
				rows={3}
				v-model={model.value.remark}
				placeholder="请输入"
			/>
		),
		descItem: () => `${model.value.remark ?? "-"}`,
	},
];
</script>

<template>
	<PromiseDialog
		ref="dialogRef"
		:title="title"
		:before-close="beforeClose"
		w="707px!"
	>
		<el-scrollbar h="408px!">
			<FormDesc
				ref="formDescRef"
				m="t-24px x-30px"
				:type="type === 'read' ? 'desc' : 'form'"
				form-class="gap-x-20px"
				:model="model"
				:children="children"
				:column="2"
			/>
		</el-scrollbar>
		<template v-if="type === 'write'" #footer>
			<el-button @click="dialogRef?.close()">取消</el-button>
			<el-button type="primary" :is-loading="isLoading" @click="execute()"
				>确定</el-button
			>
		</template>
	</PromiseDialog>
</template>
